<template>
  <div class="hello">
    <div class="warrper">
      <div class="header">
        <div class="collaps-btn">
          <div class="collaps-btn1">
            <img src="../../static/logo12.png" alt />
          </div>
          <div class="collaps-btn2">
            <img src="../../static/logo13.png" alt />
          </div>
        </div>
        <div class="header-right">
          <div class="header-1">
            <div class="header-right1">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
            <div class="header-right2">
              <span>欢迎您贝贝~</span>
            </div>
            <div class="header-right3">
              <img src="../../static/btn.png" alt />
            </div>
          </div>
        </div>
      </div>
      <main>
        <div class="container">
          <div class="row">
            <div class="main-1">
              <div class="col-md-2">
                <div class="main-title">
                  <h3>平台管理主菜单</h3>
                  <img src="../../static/zhucaidan.png" alt />
                </div>
                <div class="main-wode">
                  <ul>
                    <li>
                      <img class="main-left" src="../../static/gongzuotai.png" alt />
                      <span>我的工作台</span>
                      <img class="main-right" src="../../static/xingzhuang.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou1.png" alt />
                      <span @click="openrenwuliebiao">任务接收</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou2.png" alt />
                      <span>任务分配</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou3.png" alt />
                      <span>任务上报</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou4.png" alt />
                      <span>权限管理</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou5.png" alt />
                      <span>部门管理</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou6.png" alt />
                      <span>用户管理</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                    <li>
                      <img class="main-left" src="../../static/jieshou7.png" alt />
                      <span>系统管理</span>
                      <img class="main-right" src="../../static/xia.png" alt />
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-md-1"></div>
              <div class="col-md-10">
                <div class="zhuye">
                  <div class="zhuye-1">
                    <h4>我的主页</h4>
                  </div>
                  <div class="main1">
                    <div class="beijing">
                      <img src="../../static/beijing.png" alt />
                      <div class="col">
                        <div class="col-1">
                          <div class="coll">
                            <img src="../../static/ducha.png" alt />
                          </div>
                          <div class="coll-1">
                            <img src="../../static/ducha-1.png" alt />
                          </div>
                        </div>

                        <div class="col-2">
                          <div class="img-1">
                            <img src="../../static/renwu.png" alt />
                          </div>
                          <div class="img-2">
                            <img src="../../static/renwu1.png" alt />
                          </div>
                          <div class="img-3">
                            <div class="div1">
                              <img src="../../static/kaohe1.png" alt />
                            </div>
                            <div class="div1">
                              <img src="../../static/kaohe2.png" alt />
                            </div>
                            <div class="div1">
                              <img src="../../static/kaohe3.png" alt />
                            </div>
                            <div class="div1">
                              <img src="../../static/kaohe4.png" alt />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "123"
    };
  },
  methods: {
    /** 打开任务列表 */
    openrenwuliebiao() {
      this.$router.push({
        name:'Renwuliebiao',
        params:{
          id:1
        }
      });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .hello {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  right: 0;
  bottom: 0;
} */
.header {
  width: 100%;
  background: linear-gradient(159deg, #045496, #0367b2);
}
.collaps-btn {
  width: 50%;
  text-align: left;
  padding: 10px 20px;
}
.collaps-btn1 img {
  height: 50px;
}
.header::after {
  display: table;
  content: "";
  clear: both;
}
.collaps-btn1 {
  float: left;
}
.collaps-btn2 {
  float: left;
  padding: 6px 10px;
}
.collaps-btn2 img {
  width: 400px;
}
.header-right {
  width: 50%;
  float: right;
  height: 30px;
}
.header-1 {
  width: 40%;
  float: right;
}
.header-right::after {
  display: table;
  content: "";
  clear: both;
}
.header-right1 {
  text-align: right;
  float: left;
  margin-top: -10px;
  padding: 0 10px;
}
.header-right2 {
  float: left;
  text-align: right;
  color: white;
}
.header-right3 img {
  width: 20px;
}
main {
  width: 100%;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}
.main-1 .col-md-2 {
  width: 19%;
  float: left;
}
.main-title {
  background: #1e507a;
}
.main-1 .col-md-2 .main-title h3 {
  text-align: left;
  padding: 8px 20px;
  color: white;
}
.main-1 .col-md-1 {
  background: white;
  float: left;
  width: 1%;
  height: 20px;
}
.main-1 .col-md-10 {
  width: 80%;
  float: left;
}
.main-title::after {
  display: table;
  content: "";
  clear: both;
}
.main-title h3 {
  float: left;
}
.main-title img {
  width: 20px;
  height: 20px;
  float: left;
  padding: 8px 14px;
  margin-top: 4px;
}
.zhuye-1 {
  background: #1e507a;
}
.zhuye-1 h4 {
  color: white;
  text-align: left;
  padding: 10px 16px;
  width: 70px;
  background: #4b9bdd;
}
.main-wode ul li {
  background: #4b9ee0;
  padding: 10px 4px;
}
.main-wode ul img {
  width: 25px;
}
.main-left {
  float: left;
  margin-left: 20px;
  padding: 0 8px;
}
.main-wode ul li span {
  float: left;
  color: white;
  width: 80px;
  text-align: left;
}
.main-right {
  width: 30px;
  margin-left: 8px;
  cursor: pointer;
}
.beijing {
  position: relative;
}
.beijing img {
  width: 100%;
}
.col {
  width: 80%;
  height: 20px;
  left: 10%;
  top: 10%;
  position: absolute;
}
.col-1 {
  display: flex;
}
.coll {
  width: 66.666666%;
}
.coll img {
  width: 100%;
  height: 180px;
}
.coll-1 {
  width: 33.333333%;
}
.coll-1 img {
  width: 100%;
  height: 180px;
}
.col-2 {
  justify-content: space-between;
  display: flex;
}
.img-1 {
  width: 33.333333%;
}
.img-1 img {
  width: 100%;
}
.img-2 img {
  width: 100%;
}
.img-2 {
  width: 33.333333%;
}
.img-3 {
  display: flex;
  flex-wrap: wrap;
  width: 33.333333%;
}
.img-3 div {
  width: 50%;
}
img {
  cursor: pointer;
}
</style>